<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0,
  width=device-width, initial-scale=1.0">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
	  <h1>吉布森克隆计算器</h1>
	  <hr>
	<el-form ref="form" :model="form" label-width="200px">
		<el-form-item  label="骨架大小（bp）">
			<el-input v-model="form.a" required></el-input>
		</el-form-item>
		<el-form-item label="骨架浓度（ng/uL）">
			<el-input v-model="form.b"></el-input>
		</el-form-item>
		<el-form-item label="插入片段（bp）">
			<el-input v-model="form.c"></el-input>
		</el-form-item>
		<el-form-item label="插入片段浓度（ng/uL）">
			<el-input v-model="form.d"></el-input>
		</el-form-item>
		<el-form-item label="" v-show="show" class="bbb">
			<h3>计算结果:</h3>
			<h3> e:{{e}}  f:{{f}}</h3>
		</el-form-item>
		<el-form-item v-show="error" class="bbb">
			<h3 style="color: red;">该组合无法做出最优的吉布森克隆</h3>
		</el-form-item>
		<el-form-item class="aaa">
			<el-button type="primary" @click="submitForm()">计算</el-button>
			<el-button @click="resetForm()">重置</el-button>
		</el-form-item>
	</el-form>
  </div>
</body>
  <!-- import Vue before Element -->
  <!--<script src="https://unpkg.com/vue/dist/vue.js"></script>-->
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return { 
			 form: {
			        a: '',
			        b: '',	
					c: '',
					d: ''
					},
			e: "",
			f: "",
			show: false,
			error: false
			}
      },
	  methods: {
	        submitForm(formName) {
			this.e = (5*this.form.a*this.form.d)/(2*this.form.b*this.form.c+this.form.a*this.form.d)
			this.f = 5-this.e
			this.show = true
			if(this.e < this.form.a*0.0065/this.form.b 
			|| this.e > 0.25*0.65*this.form.a/this.form.b
			|| this.f < this.form.c*0.0065/this.form.d
			|| this.f > 0.25*0.65*this.form.c/this.form.d){
				this.error = true
			}
	        },
	        resetForm(formName) {
				this.form = {
			        a: '',
			        b: '',	
					c: '',
					d: ''
					},
				this.e = ''
				this.f = ''
				this.show = false
				this.error = false
	      }
		  }
    })
  </script>
  <style>
  h3{
	  margin-top: 0;
	  margin-bottom: 0;
  }
  .el-form-item__content{
	  margin-right: 33px;
  }
   .aaa{
	  margin-left: -5rem;
  }
   .bbb{
  	  margin-left: -7rem;
  }

  body{
	  background-color: rgb(255,250,230);
  }
  input{
	  background-color: rgb(255,255,250)!important;
  }
  h1{
	  text-align: center;
  }
  .el-form-item__label{
	  width: 11.5rem !important;
  }
  </style>